<!--
 * @Description: 
 * @Author: BOye
 * @Date: 2023-11-02 20:07:54
 * @LastEditTime: 2023-11-02 20:18:45
 * @LastEditors: liutq
 * @Reference: 
-->
<template>
  <div id="webgl" style="margin-top: 200px;margin-left: 100px;"></div>
</template>

<script>
import * as THREE from 'three'
export default {
  data () {
    return {

    };
  },
  methods: {
    init () {
      // 创建3D场景对象Scene
      const scene = new THREE.Scene();
      //创建一个长方体几何对象Geometry
      const geometry = new THREE.BoxGeometry(100, 100, 100);

      //创建一个材质对象Material
      const material = new THREE.MeshBasicMaterial({
        color: 0xff0000,//0xff0000设置材质颜色为红色
      });

      // 两个参数分别为几何体geometry、材质material
      const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
      //设置网格模型在三维空间中的位置坐标，默认是坐标原点
      mesh.position.set(0, 10, 0);
      scene.add(mesh);
      // 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
      // width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
      const width = window.innerWidth; //窗口文档显示区的宽度作为画布宽度
      const height = window.innerHeight; //窗口文档显示区的高度作为画布高度
      const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
      //相机在Three.js三维坐标系中的位置
      // 根据需要设置相机位置具体值
      camera.position.set(200, 200, 200);

      // 相机位置xyz坐标：0,10,0
      mesh.position.set(0, 10, 0);
      // 相机位置xyz坐标：200, 200, 200
      camera.position.set(200, 200, 200);





      // 创建渲染器对象
      const renderer = new THREE.WebGLRenderer();

      renderer.render(scene, camera); //执行渲染操作
      document.body.appendChild(renderer.domElement);
      // document.getElementById('webgl').appendChild(renderer.domElement);
    },
  },
  mounted () {
    this.init()
  }

}

</script>
<style scoped>
#container {
  width: 100vw;
  height: 100vh;
}
</style>